<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { ref,reactive } from 'vue';
// import {HomeData} from "../../api/home"
import {useCounterStore} from "../../stores/counter"
const counter=useCounterStore()
// 首页图片
const imageList=ref([
    // eslint-disable-next-line no-undef
    {imag:"../../../public/image/壁纸2.jpg"},
    {imag:"../../../public/image/悟空背影.jpg"},
    {imag:"../../../public/image/李白-碎月剑心1.jpg"},
    {imag:"../../../public/image/李白-碎月剑心2.jpg"},
    {imag:"../../../public/image/赵云-铭钟鼎.jpg"},
    {imag:"../../../public/image/水中蓝色眼睛动漫女孩.jpg"}
])
const state = reactive({
  circleUrl:
    'https://ts1.tc.mm.bing.net/th/id/OIP-C.z8hLJ-r4jBsa1dYRotjnYgAAAA?rs=1&pid=ImgDetMain&o=7&rm=3',
})
</script>
<template>
    <div class="home">
    <div class="card">
      <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
            <el-page-header icon="" content="首页" title="企业管理后台"></el-page-header>
      </div>
    </template>
        <el-card class="cardi" style="max-width: 100%">
           <div class="card-top">
              <el-row class="demo-avatar demo-basic">
    <el-col :lg="3" :md="12">
      <div class="demo-basic--circle">
        <div class="block">
          <el-avatar :size="120" :src="state.circleUrl" v-if="!counter.users.image"/>
          <el-avatar :size="120" :src="counter.users.image" v-else/>
        </div>
      </div>
    </el-col>
    <el-col :lg="15" :md="12">
      <div class="demo-text">
           <div><h1>欢迎回来</h1></div>
           <div></div>
      </div>
      
    </el-col>
   </el-row>
        </div>
        </el-card>
        <el-card class="cards" style="max-width: 100%">
            <el-carousel :interval="4000" type="card" height="400px">
             <el-carousel-item v-for="item in imageList" :key="item">
               <!-- <h3 text="2xl" justify="center">{{ item.imag }}</h3> -->
               <img :src="item.imag" alt="">
              </el-carousel-item>
           </el-carousel>
        </el-card>
  </el-card>
    </div>
    </div>
</template>


<style lang="less" scoped>
    .card{
      text-decoration: none;
      border: none;
        .cardi{
        margin-top:10px;
        height: 160px;
        background-size:contain;
       .demo-text{
        // height: 100%;
        justify-content:space-between;
        display: flex;
        align-items: center;
       }
        }
        .cards{
           margin-top: 30px;
           object-fit: cover;
        }
    }
.el-carousel__item img {
  // height: 100%;
  width: 100%;
  object-fit: cover;
}
.demo-basic--circle{
  margin-left:40px;
}
</style>